<template>
  <div :style="style">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "FlexBox",
  props: {
    direction: {
      type: String,
      default: 'row'
    },
    flex: {
      type: [Number, String],
      default: ''
    },
    justify: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: ''
    },
    centerH: {
      type: Boolean,
      default: false
    },
    centerV: {
      type: Boolean,
      default: false
    },
    centerHV: {
      type: Boolean,
      default: false
    },
    wrap: {
      type: Boolean,
      default: false
    },
    vertical: {
      type: Boolean,
      default: false
    },
    horizontal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    style () {
      return {
        display: 'flex',
        flexDirection: this.getDirection,
        flex: this.flex,
        justifyContent: (this.centerHV || this.centerH) ? 'center' : this.justify,
        alignItems: (this.centerHV || this.centerV) ? 'center' : this.align,
        flexWrap: this.getWrap
      }
    },

    getWrap () {
      return this.wrap ? 'wrap' : 'nowrap';
    },

    getDirection() {
      return this.vertical || this.direction === 'column' ? 'column' : 'row';
    }
  },
}
</script>

<style scoped>

</style>
